<template>
  <div class="index">
    <!-- <mt-header style="background-color: #ff4d4f;color:#fff" fixed title="活动"></mt-header> -->
    <div class="main">
      <ul>
        <li v-for="item in list" :key="item.id" @click="list_detal(item.ActivityID)">
          <div class="image">
            <img
              width="100%"
              :src="'https://actwxapi.ouheshuju.com/api/v1/Images/Show/'+item.Picture"
              alt
            />
          </div>
          <div class="tit" v-if="item.IsOver == 0">
            {{item.Name}}
            <mt-button
              @click="list_detal(item.ActivityID)"
              class="btn"
              size="small"
              type="danger"
            >签到</mt-button>
          </div>
          <div class="tit" v-else>
            {{item.Name}}
            <mt-button
              class="btn"
              size="small"
              type="default"
              @click="list_detal(item.ActivityID)"
            >已结束</mt-button>
          </div>
          <div class="kong"></div>
          <p>{{item.Address}}</p>
          <p class="times">{{item.StartTime}} 至 {{item.EndTime}}</p>
        </li>
      </ul>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "../../utils/tabbar";
import https from "../../utils/http.js";
import { Swiper, Slide } from "vue-swiper-component";
export default {
  name: "index",
  data() {
    return {
      selected: "one",
      PageIndex: 1,
      index_list: [],
      list: [],
      popupVisible: false,
      zsData: {}
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {});
  },
  methods: {
    get_list() {
      https({
        
        method: "post",
        url: "/api/v1/Activities/ActivityGetPage",
        data: {
          PageIndex: 1,
          PageSize: 999
        }
      })
        .then(res => {
          console.log(res);
          if (res.Code == 200) {
            this.list = res.Data.RecordList;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    list_detal(row) {
      console.log(row);
      this.$router.push({ path: "/activity", query: { id: row } });
      // this.$router.push({ path: '/index_detail'})
    }
  },
  mounted: function() {
    this.get_list();
  },
  created() {},
  components: { tabbar, Swiper, Slide }
};
</script>

<style lang="less" scoped>
.main::-webkit-scrollbar {
  display: none;
}
.btn {
  float: right;
  margin-right: 1rem;
  margin-top: 1.5rem;
}
.main {
  width: 100%;
  // padding-top: 2.5rem;
  margin-bottom: 4rem;
  overflow: scroll;
  ul {
    width: 92%;
    margin: 0 auto;
    padding: 0;
    li {
      list-style: none;
      width: 100%;

      border-radius: 4px;
      background: #fff;
      margin-top: 1rem;
      padding-bottom: 1rem;
      box-sizing: border-box;
      .image {
        width: 100%;
        height: 350px;
        margin-bottom: 0.3rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .tit {
        display: block;
        width: 95%;
        margin: 0 auto;

        font-weight: 600;
        font-size: 1rem;
      }
      .kong {
        width: 100%;
        height: 20px;
      }
      p {
        width: 95%;
        margin: 0 auto;
        font-size: 0.8rem;
      }
      .times {
        margin-top: 10px;
      }
    }
  }
}
</style>